/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-11 23:04:06
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-13 00:01:26
 */
import { useStore } from '@/store'
import styles from './index.module.less'
import { Descriptions, Card, Button } from 'antd'
import type { DescriptionsProps } from 'antd'

import { useEffect, useState } from 'react'
import api from '@/api'
import { formatStatus } from '@/utils'
import { DashBoard } from '@/types/api'
import { useCharts } from '@/hook/useEchart'
import { formatNum, formatMoney } from '@/utils'
export default function DashBoardF() {
  const userInfo = useStore((state) => state.userInfo)
  const [lineRef, lineChart] = useCharts()
  const [pieRef1, pieChart1] = useCharts()
  const [pieRef2, pieChart2] = useCharts()
  const [radarRef, radarChart] = useCharts()
  const [report, setReport] = useState<DashBoard.ReportData>()
  useEffect(() => {
    handleLineChart()
    handlepieChartCity()
    pieChartAge()
    handleRadarChart()
    getReportData()
  }, [lineChart, pieChart1, pieChart2, radarChart])
  //加载折线图数据
  const handleLineChart = async () => {
    if (!lineChart) return
    const data = await api.getLineData()

    lineChart?.setOption({
      title: {
        text: '订单和流水走势图',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['订单', '流水'],
      },
      //网格的容器
      grid: {
        left: '5%',
        right: '15%',
        bottom: '10%',
      },
      xAxis: {
        data: data.label,
      },
      yAxis: {
        type: 'value',
      },

      //数据集
      series: [
        {
          name: '订单',
          type: 'line',
          data: data.order,
        },
        {
          name: '流水',
          type: 'line',
          data: data.money,
        },
      ],
    })
  }
  const handlepieChartCity = async () => {
    if (!pieChart1) return
    const data = await api.getPieCityData()
    pieChart1?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },

      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '55%',
          data: data,
        },
      ],
    })
  }
  const pieChartAge = async () => {
    if (!pieChart2) return
    const data = await api.getPieAgeData()
    pieChart2?.setOption({
      title: {
        text: '司机年龄分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      roseType: 'area',
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          radius: [50, 180],
          data: data,
        },
      ],
    })
  }
  const handleRadarChart = async () => {
    if (!radarChart) return
    const data = await api.getRadarData()

    radarChart?.setOption({
      // title: {
      //   text: '司机模型诊断',
      //   left: 'center',
      // },
      legend: {
        data: ['司机模型诊断'],
      },
      radar: {
        //五个模型的方向
        indicator: data.indicator,
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: data.data,
        },
      ],
    })
  }
  const handleRefresh = () => {
    handlepieChartCity()
    pieChartAge()
  }
  const items: DescriptionsProps['items'] = [
    {
      key: userInfo._id,
      label: '用户ID',
      children: userInfo._id,
    },
    {
      key: userInfo.userEmail,
      label: '邮箱',
      children: userInfo.userEmail,
    },
    {
      key: userInfo.state,
      label: '状态',
      children: formatStatus(userInfo.state),
    },
    {
      key: userInfo.job,
      label: '岗位',
      children: userInfo.job,
    },
    {
      key: userInfo.mobile,
      label: '手机号',
      children: userInfo.mobile,
    },
    {
      key: userInfo.deptName,
      label: '部门',
      children: userInfo.deptName,
    },
  ]
  const getReportData = async () => {
    const data = await api.getReportData()
    setReport(data)
  }

  return (
    <div className={styles.dashboard}>
      <div className={styles.userInfo}>
        <img
          src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          className={styles.userImg}
        />
        <Descriptions title='欢迎雪宝学习后台管理系统' items={items} />
      </div>
      <div className={styles.report}>
        <div className={styles.card}>
          <div className='title'>司机数量</div>
          <data className={styles.data}>{formatNum(report?.driverCount)}个</data>
        </div>
        <div className={styles.card}>
          <div className='title'>总流水</div>
          <data className={styles.data}>{formatMoney(report?.totalMoney)}元</data>
        </div>
        <div className={styles.card}>
          <div className='title'>总订单</div>
          <data className={styles.data}>{formatNum(report?.orderCount)}单</data>
        </div>
        <div className={styles.card}>
          <div className='title'>开通城市</div>
          <data className={styles.data}>{formatNum(report?.cityNum)}座</data>
        </div>
      </div>
      <div className={styles.chart}>
        <Card
          title='订单和流水走势图'
          extra={
            <Button type='primary' onClick={handleLineChart}>
              刷新
            </Button>
          }
        >
          <div ref={lineRef} id='lineChart' className={styles.itemLine}></div>
        </Card>
      </div>
      <div className='chart'>
        <Card
          title='司机分布'
          extra={
            <Button type='primary' onClick={handleRefresh}>
              刷新
            </Button>
          }
        >
          <div className={styles.pineChart}>
            <div ref={pieRef1} id='pieChartCity' className={styles.itemPine}></div>
            <div ref={pieRef2} id='pieChartAge' className={styles.itemPine}></div>
          </div>
        </Card>
      </div>
      <div className='chart'>
        <Card
          title='模型诊断'
          extra={
            <Button type='primary' onClick={handleRadarChart}>
              刷新
            </Button>
          }
        >
          <div ref={radarRef} id='radarChart' className={styles.itemLine}></div>
        </Card>
      </div>
    </div>
  )
}
